<template>
<topline></topline>
  <div>
        <figure id="background_one">
            <div id="block-box"></div>
            <div id="background-box">
                <h2>孤独是一个人的狂欢，狂欢是一群人的孤独</h2>
                    <h4 id="twoword">在音乐中，找到真正的自己</h4>
                        <router-link to='/loginmain'><div id="background-button">开启你的故事</div></router-link>
            </div>
        </figure>
         
          
  </div>
</template>

<script>
import topline from '../topline'
export default {
    name:"login",
    components:{
    topline,
},
    data(){
        return{}
    },
    methods:{
    }
    

}
</script>

<style scoped>
 
/* 主页面背景 */
#background_one{
    position:relative;
    top:-28px;
    left: -350px;
    background-image: url(../../assets/loginimage/ground_one.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 101%;
    height: 620px;
    display:block;
    filter: grayscale(0.8);
}
#block-box{
    position: absolute;
    top:0px;
    left: 0px;
    background-color: #222031;
    opacity: 0.4;
    width: 101%;
    height: 620px;
}
#background-box{
    position: absolute;
    top: 25%;
    left: 36%;
    font-size: 20px;
    line-height: 3em;
    color:#222031 ;
    text-align: center;
}
#background-button{
    position: absolute;
    top:190px;
    left: 33%;
    width: 200px;
    height: 58px;
    background-color:#342f56;
    color: #fff;
    border-radius: 8px 8px 8px 8px;
    cursor:default;
    transition: 0.8s;
    display: inline-block;
}
#background-button:hover{
    transform: scale(0.8);
} 
#twoword{
    position: relative;
}
/* 登录框 */
 

</style>